﻿<template>
  <div class="bg">

    <div class="head clearfix">
      <h1 class="pulll_left">舆情主题监测分析</h1>
      <div class="menu menu2 pulll_left">

      </div>
      <div class="time" id="showTime">
        <el-select v-model="topicId" placeholder="请选择监测主题" clearable class="show-time">
          <el-option v-for="dict in topics"
                     :key="dict.id"
                     :label="dict.title"
                     :value="dict.id"
                     style="width: 100%"/>
        </el-select>
      </div>

    </div>
    <div class="mainbox">

      <ul class="clearfix nav1">
        <li style="width: 22%">
          <div class="box">
            <div class="tit">情感分析</div>
            <div class="boxnav" style="height: 330px;">
              <div class="yqlist">
                <ul class="clearfix">
                  <li>
                    <div class="yq">{{allNum}}</div>
                    <span>全部信息</span></li>
                  <li>
                    <div class="yq">{{relatedInformation}}</div>
                    <span>相关信息</span></li>
                  <li>
                    <div class="yq">{{positive}}</div>
                    <span>正面信息</span></li>
                  <li>
                    <div class="yq">{{negative}}</div>
                    <span>负面信息</span></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="tit">热词云图</div>
            <div class="boxnav">
              <div class="" style="height: 406px" id="echart2">
                <WordCloudTransparentBackground :hots="hotWords" style="height: 100%" :optionTitleText="''"/>
              </div>

            </div>
          </div>
        </li>
        <li style="width: 56%">

          <div class="box">
            <div class="boxnav mapc" style="height: 550px; position: relative">
              <MapChinaChartTransparentBackground style="height: 100%"
                                                  :data="chinaOpinions"></MapChinaChartTransparentBackground>
            </div>
          </div>
          <div class="box">
            <div class="tit">正负面信息趋势</div>
            <div class="boxnav" style="height: 250px;" id="echart3">


            </div>
          </div>
        </li>
        <li style="width: 22%">
          <div class="box">
            <div class="tit">舆情直播</div>
            <div class="boxnav" style="height: 508px;">

              <div class="scroll-container">

                <div class="scroll-content">
                  <div v-for="(opinion,index) in opinions" :key="index">
                    <div>
                      <span class="text_right" v-html="opinion.title"> </span>
                    </div>
                    <div style="border-bottom: 1px solid #5a5e66;">
                      <span class="text_left">{{opinion.publishTime}}</span>
                      <span class="text_center" v-if="opinion.ispositive === 1" style="color: green">正面</span>
                      <span class="text_center" v-else-if="opinion.isnegative === 1" style="color: orangered">负面</span>
                      <span class="text_center" v-else-if="opinion.isneutral === 1" style="color: #0C71E0">中性</span>
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </div>
          <div class="box">
            <div class="tit">媒体分布</div>
            <div class="boxnav" style="height: 250px;" id="echart5">
            </div>
          </div>

        </li>
      </ul>
    </div>

  </div>
</template>


<script>
  import * as echarts from 'echarts'
  import WordCloudTransparentBackground from '@/components/Echarts/WordCloudTransparentBackground'
  import MapChinaChartTransparentBackground from '@/components/Echarts/MapChinaChartTransparentBackground'
  import {
    listTopic,
    queryByTopicId,
    getSentimentByPublishTimeByTopicId, getKeywordsByTopicId,
    countSensitiveOpinionByMediaName,
    getPublicOpinionCountGroupByProvinceOfTopicId,
    getAllInformation
  } from "@/api/system/topic";

  export default {
    name: 'Home',
    components: {
      WordCloudTransparentBackground,
      MapChinaChartTransparentBackground
    },
    data() {
      return {
        title: "数据大屏",
        topicId: null,
        topics: [],
        hotWords: [{name: "暂无数据", value: 1}],
        allNum: 0,
        positive: 0,
        negative: 0,
        relatedInformation: 0,
        maxOpinionCountChina: 0,
        chinaOpinions: [],
        opinions: []
      }
    },
    watch: {
      topicId(newValue, oldValue) {
        console.log("newValue:", newValue)
        if (newValue !== null && newValue !== undefined && newValue !== '') {
          this.getData();
        }
      }
    },
    methods: {
      getData() {
        this.getSentimentByPublishTimeByTopicId()
        this.getKeywordsByTopicId()
        this.getAllInformation()
        this.countSensitiveOpinionByMediaName()
        this.getPublicOpinionCountGroupByProvinceOfTopicId()
        this.queryByTopicId();
      },
      /** 最新舆情 */
      queryByTopicId() {
        queryByTopicId({
          //自定义选择的日期
          topicId: this.topicId
        }, {
          pageNum: 1,
          pageSize: 9,
        }).then(response => {
          this.opinions = response.rows;
        });
      },
      getPublicOpinionCountGroupByProvinceOfTopicId() {
        getPublicOpinionCountGroupByProvinceOfTopicId({
          topicId: this.topicId,
        }).then(response => {
          //国内舆情
          let mapDatas = response.data
          this.maxOpinionCountChina = 0
          mapDatas.forEach((item) => {
            this.maxOpinionCountChina = item.value > this.maxOpinionCountChina ? item.value : this.maxOpinionCountChina
            let str = item.name;
            if (str.includes("省")) {
              str = str.replace("省", "");
            }
            let obj = {
              name: str,
              value: item.value,
            }
            this.chinaOpinions.push(obj)
          })
        });
      },
      countSensitiveOpinionByMediaName() {
        countSensitiveOpinionByMediaName({
          topicId: this.topicId,
        }).then(response => {
          let mediaNameSensitive = response.rows
          let legendDatas = []
          let seriesDatas = []
          mediaNameSensitive.forEach(m => {
            legendDatas.push(m.mediaName)
            let obj = {
              name: m.mediaName,
              value: m.positive + m.negative + m.neutral
            }
            seriesDatas.push(obj)
          })
          this.echarts_5(legendDatas, seriesDatas)

        });
      },
      getAllInformation() {
        getAllInformation({
          topicId: this.topicId,
        }).then(response => {
          this.allNum = response.data.allNum
          this.positive = response.data.positive
          this.negative = response.data.negative
          this.relatedInformation = response.data.relatedInformation
        })
      },
      echarts_5(legendDatas, seriesDatas) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
        let option = {
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: 'rgba(255,255,255,.5)'
            },
            bottom: '1%',

            data: legendDatas
          },
          color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },

          calculable: true,
          series: [
            {

              type: 'pie',
              radius: [20, 70],
              center: ["50%", "50%"],
              roseType: 'area',
              data: seriesDatas,
              label: {
                normal: {
                  formatter: function (param) {
                    return param.name + ':\n' + param.value + '\n';
                  }

                }
              },
              labelLine: {
                normal: {
                  length: 5,
                  length2: 15,
                  lineStyle: {width: 1}
                }
              },

              itemStyle: {
                normal: {
                  shadowBlur: 30,
                  shadowColor: 'rgba(0, 0, 0, 0.4)'
                }

              },
            }
          ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      getKeywordsByTopicId() {
        let param = {
          topicId: this.topicId,
        };
        getKeywordsByTopicId(param).then(response => {
          if (response.rows != undefined && response.rows.length > 0) {
            this.hotWords = response.rows;
          } else {
            this.hotWords = [{name: "暂无数据", value: 1}];
          }
          console.log(this.hotWords)
        });
      },
      getSentimentByPublishTimeByTopicId() {
        getSentimentByPublishTimeByTopicId({
          topicId: this.topicId,
        }).then(response => {
          let list = response.rows
          let xAxisData = []
          let zm = {
            name: '正面',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: 'rgba(59, 162, 114, 1)',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(59, 162, 114, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(59, 162, 114, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#3ba272',
                borderColor: 'rgba(59, 162, 114, .1)',
                borderWidth: 5
              }
            },
            data: []

          }
          let zx = {
            name: '中性',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: 'rgba(128, 128, 128, 1)',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(128, 128, 128, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(128, 128, 128, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#808080',
                borderColor: 'rgba(128, 128, 128, .1)',
                borderWidth: 5
              }
            },
            data: []

          }
          let fm = {
            name: '负面',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {

              normal: {
                color: 'rgba(210, 23, 23, 1)',
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(210, 23, 23, 0.4)'
                }, {
                  offset: 0.8,
                  color: 'rgba(210, 23, 23, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
              }
            },
            itemStyle: {
              normal: {
                color: '#ee6666',
                borderColor: 'rgba(210, 23, 23, 0.5)',
                borderWidth: 5
              }
            },
            data: []

          }
          let zmlist = []
          let zxlist = []
          let fmlist = []
          list.forEach(item => {
            xAxisData.push(item.name);
            let zmnum = 0
            let zxnum = 0
            let fmnum = 0
            item.value.forEach(i => {
              if (i.name == 'ispositive') {
                zmnum = i.value
              }
              if (i.name == 'isneutral') {
                zxnum = i.value
              }
              if (i.name == 'isnegative') {
                fmnum = i.value
              }
            })
            zmlist.push(zmnum)
            zxlist.push(zxnum)
            fmlist.push(fmnum)
          })
          zm.data = zmlist
          zx.data = zxlist
          fm.data = fmlist
          this.echarts_3(xAxisData, zm, zx, fm)
        })
      },
      /** 查询模版组件列表 */
      getTopicList() {
        listTopic().then(response => {
          this.topics = response.rows;
          if (this.topics.length > 0) {
            this.topicId = this.topics[0].id
          }
        });
      },
      echarts_3(xAxisData, zm, zx, fm) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('echart3'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#dddc6b'
              }
            }
          },
          grid: {
            left: '10',
            top: '20',
            right: '30',
            bottom: '10',
            containLabel: true
          },
          legend: {
            textStyle: {
              color: 'white'
            },
            data: ["正面", "中性", "负面"]
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 14,
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.2)'
              }

            },

            data: xAxisData

          }, {

            axisPointer: {show: false},
            axisLine: {show: false},
            position: 'bottom',
            offset: 20,


          }],

          yAxis: [{
            type: 'value',
            axisTick: {show: false},
            splitNumber: 4,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)'
              }
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 16,
              },
            },

            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,.1)',
                type: 'dotted',
              }
            }
          }],
          series: [zm, zx, fm]

        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    created() {
    },
    mounted() {
      this.getTopicList()
    }


  }
</script>

<style lang="scss" scoped>

  /* CSS Document */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
  }

  *, body {
    padding: 0px;
    margin: 0px;
    font-family: "微软雅黑";
  }

  @font-face {
    font-family: electronicFont;
    src: url(font/DS-DIGIT.TTF)
  }

  html, body {
    min-height: 100%;
  }

  li {
    list-style-type: none;
  }

  table {
  }

  i {
    margin: 0px;
    padding: 0px;
    text-indent: 0px;
  }

  img {
    border: none;
    max-width: 100%;
  }

  a {
    text-decoration: none;
    color: #fff;
  }

  a.active, a:focus {
    outline: none !important;
    text-decoration: none;
  }

  ol, ul, p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0
  }

  a:hover {
    color: #06c;
    text-decoration: none !important
  }

  .clearfix:after, .clearfix:before {
    display: table;
    content: " "
  }

  .clearfix:after {
    clear: both
  }

  .pulll_left {
    float: left;
  }

  .pulll_right {
    float: right;
  }

  i {
    font-style: normal;
  }

  .text-w {
    color: #ffe400
  }

  .text-d {
    color: #ff6316
  }

  .text-s {
    color: #14e144
  }

  .text-b {
    color: #07e5ff
  }

  .head {
    position: relative;
    height: 90px;
    margin: 0 15px;
    padding-right: 60px;
  }

  .head h1 {
    font-size: 30px;
    letter-spacing: -2px;
    text-align: center;
    line-height: 90px;
    padding-right: 55px;
    color: #daf9ff;
  }

  .head .menu {
  }

  .head .menu ul {
    font-size: 0;
  }

  .head .menu li {
    display: inline-block;
    position: relative;
    margin: 30px 15px;;
  }

  .head .menu li a {
    display: block;
    font-size: 18px;
    color: #fff;
    line-height: 30px;
    padding: 0 10px;
  }

  .head .time {
    position: absolute;
    right: 0;
    line-height: 90px;
    top: 0;
  }

  .menu li:before,
  .menu li:after {
    position: absolute;
    width: 10px;
    height: 5px;
    opacity: .4;
    content: "";
    border-top: 2px solid #02a6b5;
    top: -1px;
    border-radius: 2px;
  }

  .menu li:before, .menu li a:before {
    border-left: 2px solid #02a6b5;
    left: -1px;
  }

  .menu li:after, .menu li a:after {
    border-right: 2px solid #02a6b5;
    right: -1px;
  }

  .menu li a {
    position: relative;
  }

  .menu li a:before,
  .menu li a:after {
    position: absolute;
    width: 10px;
    height: 5px;
    opacity: .4;
    content: "";
    border-bottom: 2px solid #02a6b5;
    bottom: -1px;
    border-radius: 2px;
  }

  .head .menu li a:hover {
    color: #f4e925;
  }

  .menu li a:hover:before,
  .menu li a:hover:after,
  .menu li:hover:before,
  .menu li:hover:after {
    border-color: #f4e925;
    opacity: 1;
  }

  .mainbox {
    padding: 0px 10px;
  }

  .nav1 {
    margin-left: -6px;
    margin-right: -6px;
  }

  .nav1 > li {
    padding: 0 6px;
    float: left;
  }

  .box {
    border: 1px solid rgba(7, 118, 181, .5);
    box-shadow: inset 0 0 10px rgba(7, 118, 181, .4);
    margin-bottom: 12px;
    position: relative;
  }

  .tit {
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid rgba(7, 118, 181, .7);
    font-size: 16px;
    font-weight: 500;
    position: relative;
  }

  .tit:before, .tit01:before {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    background: rgba(22, 214, 255, .9);
    box-shadow: 0 0 5px rgba(22, 214, 255, .9);
    border-radius: 10px;
    left: 10px;
    top: 18px;
  }

  .tit:after, .box:before {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
    box-shadow: 0 0 5px rgba(131, 189, 227, 1);
    opacity: .6
  }

  .box:before {
    top: -1px;
  }

  .boxnav {
    padding: 10px;
  }

  .tit01 {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding-left: 15px;
  }

  .tit01:before {
    left: 3px;
    top: 8px;
  }

  .mapc {
    background: url(images/bg3.png) no-repeat center center;
    background-size: 100% 100%
  }

  .map {
    position: relative;
    height: 100%;
  }

  .map img {
  }

  .mapnav {
    position: absolute;
    z-index: 10;
  }


  .yqlist li {
    float: left;
    width: 50%;
    padding: 10px 0;
    text-align: center;
  }

  .yq {
    width: 100px;
    height: 100px;
    margin: 0 auto 5px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: electronicFont;
    color: #fff32b;
  }

  .yqlist li span {
    opacity: .6;
    font-size: 14px;
  }

  .yq:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    background: url(images/img1.png) center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .3;
    left: 0;
    top: 0;
    animation: myfirst2 15s infinite linear;
  }

  .yq:after {
    position: absolute;
    width: 86%;
    background: url(images/img2.png) center center;
    border-radius: 100px;
    background-size: 100% 100%;
    opacity: .3;
    height: 86%;
    content: "";
    left: 7%;
    top: 7%;
    animation: myfirst 15s infinite linear;
  }


  @keyframes myfirst {
    to {
      transform: rotate(-360deg)
    }
  }

  @keyframes myfirst2 {
    to {
      transform: rotate(360deg)
    }
  }


  .text_left {
    font-size: 14px;
  }

  .text_center {
    font-size: 14px;
    float: right;
  }

  .text_right {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: .8;
    line-height: 33px;
    font-size: 14px;
  }

  // input框
  ::v-deep .el-input__inner {
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.50);
    border: none; // 去掉边框
    /*border-color: #XXXXXX // 默认边框的颜色*/
    text-align: left;
    border-radius: 0px;
    height: 40px;
    /*background-size: 100% 100%;*/
    /*background-image: url("../../../assets/images/title_bg.png");*/
    color: #00CCFF;
    font-weight: bold;
    font-size: 16px;
  }

  .bg {
    color: #fff;
    font-size: 16px;
    background: #033c76 url(images/bg.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
  }

</style>
